<template>
	<BaseField v-bind="props" :visible="visible">
		<div class="field-text" style="width: 100%">
			<div class="view" v-if="status === 'view'">
				{{ getValue(fieldType, prop, modelValue) }}
			</div>
			<div class="edit" id="timeEdit" style="width: 100%" v-else>
				<a-year-picker :size="size" ref="inputRef" @change="handleChange" v-if="prop.formatType === 'year'" v-model="dataValue" style="width: 100%" />
				<a-month-picker  :size="size" ref="inputRef" @change="handleChange" v-else-if="prop.formatType === 'month'" v-model="dataValue" style="width: 100%" />
				<a-date-picker :size="size" ref="inputRef" @popup-visible-change="(data) => (visible = data)" @change="handleChange" v-else style="width: 100%" v-model="dataValue" :showTime="prop.showTime" />
			</div>
		</div>
	</BaseField>
</template>

<script setup lang="ts">
import { getValue } from "@/utils/field";
import { propsInfo } from "./utils/props";

const props = defineProps(propsInfo);
const visible = ref(false);

const emit = defineEmits(["update:modelValue", "update:fieldShow", "change"]);
const dataValue: any = ref("");
watch(
	() => props.modelValue,
	(data) => {
		dataValue.value = data;
		emit("update:modelValue", dataValue.value);
		emit("update:fieldShow", dataValue.value);
	},
	{ immediate: true }
);
const handleChange = (info) => {
	const data = info || "";
	emit("update:modelValue", data);
	emit("update:fieldShow", data);
	emit("change", data);
};
</script>

<style scoped></style>
